<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>进度条 - 页面元素</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs/layui/layui-2.9.14/dist/layui.js"></script>

</head>

<body style="margin: 100px;">

	<div class="layui-progress" lay-showPercent="true">
		<div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
	</div>
	<br />

	<div class="layui-progress" lay-showPercent="yes">
		<div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
	</div>
	<br />
	<div class="layui-progress layui-progress-big" lay-showPercent="yes">
		<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
	</div>
	<br />
	<div class="layui-progress layui-progress-big">
		<div class="layui-progress-bar" lay-percent="20%"></div>
	</div>
	<br />
	<div class="layui-progress layui-progress-big">
		<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
	</div>
	<br />
	<div class="layui-progress layui-progress-big" lay-showPercent="true">
		<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
	</div>
	<br />
	<script>
		//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
		layui.use('element', function () {
			var element = layui.element;
		});
	</script>


</body>

</html>